<script setup lang="ts">
import {computed} from "vue";
import {useRoute} from "vue-router";
const list = [
  {
    path:"/dashboard",
    name:"dashboard",
    label:"仪表板",
    icon: "DataBoard",
  },
  {
    path:"/calendar",
    name:"calendar",
    label:"会议日历",
    icon: "Calendar",
  },
  {
    path:"/meeting",
    name:"meeting",
    label:"会议室管理",
    icon: "OfficeBuilding",
    children:[
      {
        path:"/meeting/rooms",
        name:"meetingRooms",
        label:"会议室列表",
        icon: "List",
      }
    ]
  },
  {
    path:"/booking",
    name:"booking",
    label:"预约管理",
    icon: "Document",
    children:[
      {
        path:"/booking/list",
        name:"bookingList",
        label:"预约列表",
        icon: "Document",
      },
      {
        path:"/booking/form",
        name:"bookingForm",
        label:"新建预约",
        icon: "Plus",
      }
    ]
  },
  {
    path:"/mybooking",
    name:"mybooking",
    label:"我的预约",
    icon: "User",
  },
  {
    path:"/approval",
    name:"approval",
    label:"预约审批",
    icon: "Finished",
  },
  {
    path:"/stats",
    name:"stats",
    label:"会议室统计",
    icon: "PieChart",
  },
  {
    path:"/notice",
    name:"notice",
    label:"通知公告",
    icon: "Bell",
  },
  {
    path:"/userInfo",
    icon: "UserFilled",
    label: "个人中心",
    children:[
      {
        path:"/user/info",
        name:"userinfo",
        label:"基本资料",
        icon: "user",
      },
      {
        path:"/user/resetPassword",
        name:"resetPassword",
        label:"重置密码",
        icon: "EditPen",
      }
    ]
  }
];
const noChildren = ()=>{
  return list.filter(item=>!item.children)
}
const hasChildren = ()=>{
  return list.filter(item => item.children)
}
const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>

<template>
  <el-aside width="200px">
    <div class="system-title">会议室预约系统</div>
    <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
             router :default-active="activeMenu">
      <el-menu-item  :index="item.path" v-for="item in noChildren()" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  background-color: #232323;

  .system-title {
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 18px;
    margin-top: 30px;
  }

  .el-menu {
    border-right: none;
  }
  .icons{
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
}
</style>
